<!DOCTYPE html>

<head>
	<title> Gitee -wiki 表格工具</title>
	<meta charset='utf-8'>
</head>
<body>

	
		
		<label> 
			行数：
		<input type="text" name="name" id="rowNum" value="0" defaultValue="0" required pattern="[0-9]+" />
			列数：
		<input type="text" name="name" id="columnNum" defaultValue="0"  required pattern="[0-9]+" />
		</label>

		<table id="tableToCreate">
			
		</table>		
		
		

</body>
<!-- 编辑过的表格，rebuilt提示-->
<dialog id="rebuiltAlarm">
	<h2>	表格已编辑，不建议重建表格!</h2>
	<button type="button" id="rebuiltConfirm">确认重建</button>
	<button type="button" id="rebuiltCancel">取消</button>

</dialog>
<!------------------------------>	

<!---------表格右键菜单----------->	

<div popover id="tableRightMouse">
	<ul>
	  <li><button type="button" id="addRight" class="reConstructTableBn">右增一列</button></li>
	  <li><button type="button" id="addLeft" class="reConstructTableBn">左增一列</button></li>
	  <li><button type="button" id="addDown" class="reConstructTableBn">下增一行</button></li>
	  <li><button type="button" id="addUp" class="reConstructTableBn">上增一行</button></li>
	  <li><button type="button" id="deleteThisColumn" class="reConstructTableBn">删此列</button></li>
	  <li><button type="button" id="deleteThisLine" class="reConstructTableBn">删此行</button></li>
	</ul>
</div>
<!------------------------------>	

<!---------表格右键菜单----------->	
<button type="button" id="genTableScriptBn">生成表格html</button>
<div id="showTableHtml">
</div>
<!------------------------------>	
<script>
//***************造表start*******************************	
	var tableToCreate=document.getElementById("tableToCreate");
	const tableTitleId="tableTitle";
	const tableBodyId="tableBody";
	var columnNumValue=0;
	var rowNumValue=0;
	var tableEdited=false;
	var genTableScriptBn = document.getElementById("genTableScriptBn");

	
	var rowNum = document.getElementById("rowNum");
	rowNum.addEventListener("input", () => {
		rowNumValue=rowNum.value;
		console.log(rowNum);
		reCreateTable();
	});

	
	var columnNum = document.getElementById("columnNum");
	columnNum.addEventListener("input", () => {	
		columnNumValue=columnNum.value;
		reCreateTable();		
	});	

	
	function reCreateTable(){
		if(tableEdited){		
			rebuiltAlarm.showModal();			
		}
		
		else{
			tableEdited=false;
			tableToCreate.insertAdjacentHTML("beforeend", createTableBody(rowNumValue));
			tableToCreate.insertAdjacentHTML("afterbegin", createTableTitleLine(columnNumValue));
			listenTableEdit();
		}

	}

	//每一个标题单元格的id是：t03、t02、t01...递减
	function createTableTitleLine(cNumber){
		let tableTitle=document.getElementById(tableTitleId);
		if(tableTitle != null){
			tableTitle.remove();
		}	
		let html="<thead id="+tableTitleId+">	 <tr>";
		while(cNumber>0){		
			html=html+	   ' <th scope="col" id="t0'+cNumber+'" ><input type="text" class="editUnit"/></th>';
			cNumber=cNumber-1;
		}
		html=html+"</tr>	  </thead>";
		return html;
	}
	

	function createTableBody(rNumber){
		let tableBody=document.getElementById(tableBodyId);
		if(tableBody != null){
			tableBody.remove();
		}
		let html="<tbody id="+tableBodyId+">	";
		while(rNumber>0){		
			html=html+	"<tr>"+createLineFields(rNumber) +"</tr>";			
			rNumber=rNumber-1;
		}
		html=html+"</tbody>";
		return html;					
	}	
	
	//每一个单元格的id是行数列数：33、32、31...递减
	function createLineFields(rowNumber){
		let temp =(columnNumValue==null||columnNumValue=="")?1: columnNumValue;
		let html="";
		while(temp>0){		
			html=html+` <th id="`+rowNumber+temp+`" ><textarea  type="textarea"   class="editUnit"></textarea></th>`;
			temp=temp-1;
		}	
		return html;
	}
	



	
	
//***************造表end*******************************		

//****************生成表格html*************

	genTableScriptBn.addEventListener("click", () => {	
			let tableHTML=tableToCreate.outerHTML;
			for(let tableChild of tableToCreate.children){
				let tableChildHtml=tableChild.outerHTML;			
				for(let tr of tableChild.children){
					let ths=tr.children;
					let trHTML=tr.outerHTML;
					for(let th of ths){
						let thHTML=th.outerHTML.replace(th.innerHTML, th.children[0].value);
						trHTML=trHTML.replace(th.outerHTML, thHTML);
					}
					tableChildHtml=tableChildHtml.replace(tr.outerHTML, trHTML);
				}
				
				tableHTML=tableHTML.replace(tableChild.outerHTML, tableChildHtml);
				console.log(tableHTML);
			}
			let showTableHtml = document.getElementById("showTableHtml");	
			showTableHtml.style.border="dashed lightblue";
			showTableHtml.innerText=	`</pre>`+tableHTML;		
			//console.log(tableHTML);
	});	
	



	function listenTableEdit(){
		let edits = document.getElementsByClassName("editUnit");
		for(let edit of edits){
			//Listener:单元格编辑
			edit.addEventListener("input", () => {	
				tableEdited=true;	
				console.log("tableEdited："+tableEdited);
			
			});	
			//Listener:单元格右键
			edit.addEventListener("mousedown", (event) => {	
				console.log("mousedown");
				console.log(event);
				if(event.button==2){
					tableRightMouseFun(event);
				}
				//console.log(event);
				
			});		
			
		}
	}

		
	//************表格增减行列 start**************
	let reConBns = document.getElementsByClassName("reConstructTableBn");	
	var reConstructTarget="";
	for(let button of reConBns){
		button.addEventListener("click", (event) => {	
			
	
			addLine();
			console.log(event);
			console.log(button);
			console.log(button.id);
		});
		
	}
	
	function tableRightMouseFun(mousedownEvent){
		let tableRightMouse = document.getElementById("tableRightMouse");
		tableRightMouse.style.position="relative";	
		reConstructTarget=mousedownEvent.target;
		tableRightMouse.showPopover();		
		console.log(tableRightMouse);
		//tableRightMouse.showModal();	
	
	}
	
	function addLine(){
		console.log("addLine");
		console.log(reConstructTarget);
		console.log("addLine");
		
	}
	//************表格增减行列 end**************	
	
	
//***************编辑过的表格，rebuilt提示*****************************		
	var rebuiltAlarm = document.getElementById("rebuiltAlarm");
	var rebuiltConfirm = document.getElementById("rebuiltConfirm");
	var rebuiltCancel = document.getElementById("rebuiltCancel");
	rebuiltConfirm.addEventListener("click", () => {	
		tableEdited=false;
		tableToCreate.insertAdjacentHTML("beforeend", createTableBody(rowNumValue));
		tableToCreate.insertAdjacentHTML("afterbegin", createTableTitleLine(columnNumValue));
		listenTableEdit();
		rebuiltAlarm.close();
	});	
	
	rebuiltCancel.addEventListener("click", () => {	
		rebuiltAlarm.close();
	});		
//***************编辑过的表格，rebuilt提示 end*****************************		
</script>
<style>

</style>
</html>